<template>
    <div class="app-container">
      <div class="filter-container">
         <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="商品编码"
                v-model="queryParams.goodsNo"
            ></el-input>
            <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="商品名称"
                v-model="queryParams.goodsTitle"
            ></el-input>
            <el-date-picker
                @keyup.enter.native="loadData"
                class="filter-item"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="queryParams.startTime"
                type="datetime"
                placeholder="选择开始时间"
            ></el-date-picker>&nbsp;&nbsp;
            <el-date-picker
                @keyup.enter.native="loadData"
                class="filter-item"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="queryParams.endTime"
                type="datetime"
                placeholder="选择结束时间"
            ></el-date-picker>
        <el-button
          class="filter-item"
          type="primary"
          size="small"
          v-waves
          icon="el-icon-search"
          @click="loadData"
        >搜索
        </el-button>
         <el-button
            type="primary"
            @click="handleExport"
            v-perm="'recommend_share:detail-share-export'"
            :loading="downloadLoading"
            icon="el-icon-download"
            size="small"
          >导出</el-button>
      </div>

      <el-table
        :data="dataList"
        :height="tableHeight"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <!-- <el-table-column align="center" type="index" label="序号" width="80"></el-table-column> -->
        <el-table-column align="center" prop="goodsNo" label="商品编码" width="180"></el-table-column>
        <el-table-column align="center" prop="goodsTitle" label="商品名称" width="200"></el-table-column>
        <el-table-column align="center" prop="shareCount" label="分享次数" width="100"></el-table-column>
        <el-table-column align="center" prop="successShareCount" label="成功分享购买次数" width="200"></el-table-column>
        <el-table-column align="center" prop="successPercent" label="转化率(%)" width="100"></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageNo"
          :page-sizes="[10,20,30,50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal"
        ></el-pagination>
      </div>
      <el-dialog title="详情" :visible.sync="isCurrentUserLevelShowed">
        <div class="title">
          {{formData.title}}
        </div>
        <div class="content">
          <div v-html="formData.content"></div>
        </div>
      </el-dialog>

      <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="isFormDialogShowed" width="1000px">
        <el-form
          class="dialog-form"
          :rules="formRules"
          ref="dataForm"
          :model="formData"
          label-position="left"
          label-width="120px"
        >

            <el-form-item label="分享人ID" prop="sharerId">
            <el-input v-model="formData.sharerId" maxlength="50" placeholder="请输入分享人ID"></el-input>
          </el-form-item>

            <el-form-item label="购买者ID" prop="userId">
            <el-input v-model="formData.userId" maxlength="50" placeholder="请输入购买者ID"></el-input>
          </el-form-item>

            <el-form-item label="商品SkuID" prop="goodsSkuId">
            <el-input v-model="formData.goodsSkuId" maxlength="50" placeholder="请输入商品SkuID"></el-input>
          </el-form-item>

            <el-form-item label="状态" prop="status">
            <el-input v-model="formData.status" maxlength="50" placeholder="请输入状态"></el-input>
          </el-form-item>

            <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="formData.createTime" maxlength="50" placeholder="请输入创建时间"></el-input>
          </el-form-item>

            <el-form-item label="修改时间" prop="modifyTime">
            <el-input v-model="formData.modifyTime" maxlength="50" placeholder="请输入修改时间"></el-input>
          </el-form-item>

            <el-form-item label="activity_id" prop="activityId">
            <el-input v-model="formData.activityId" maxlength="50" placeholder="请输入activity_id"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isFormDialogShowed = false">取消</el-button>
          <el-button type="primary" :loading="isSubmiting" @click="handleSubmitForm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>

<script>
import * as moment from 'moment'
export default {
  name: 'index',
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        goodsTitle: '',
        goodsNo: '',
        startTime: '',
        endTime: ''
      },
      formRules: {
        sharerId: [{
          required: true,
          message: '请输入分享人ID'
        }],
        userId: [{
          required: true,
          message: '请输入购买者ID'
        }],
        goodsSkuId: [{
          required: true,
          message: '请输入商品SkuID'
        }],
        status: [{
          required: true,
          message: '请输入状态'
        }],
        createTime: [{
          required: true,
          message: '请输入创建时间'
        }],
        modifyTime: [{
          required: true,
          message: '请输入修改时间'
        }],
        activityId: [{
          required: true,
          message: '请输入activity_id'
        }]
      },

      formData: {},
      isSubmiting: false,
      isFormDialogShowed: false,
      isCurrentUserLevelShowed: false,
      dataList: [],
      dataTotal: 0,
      isEditing: false,
      tableHeight: 300
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 300
    this.queryParams.startTime = moment().subtract(30, 'days').format('YYYY-MM-DD 00:00:00')
    this.loadData()
  },
  methods: {
    handleRemove (row) {
      this.$$comfirm('确认删除该记录吗', _ => {
        this.$post('/admin/share_activity_user_log/remove', { id: row.id }).then(_ => {
          this.$$notify()
          this.loadData()
        })
      })
    },
    handleExport () {
      this.downloadLoading = true
      this.$post('/admin/share_activity_user_log/goods_share_statistics',
        {
          pageNo: 1,
          pageSize: 4000,
          ...this.queryParams
        })
        .then(res => {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['商品编码', '商品名称', '分享次数', '成功分享购买次数', '转化率(%)']
            const filterVal = ['goodsNo', 'goodsTitle', 'shareCount', 'successShareCount', 'successPercent']
            const data = this.formatJson(filterVal, res.rows)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '商品分享统计'
            })
            this.downloadLoading = false
          })
        })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    handleAdd () {
      this.isFormDialogShowed = true
      this.formData = {}
      this.isEditing = false
    },
    handleViewNote (row) {
      this.formData = row
      this.isCurrentUserLevelShowed = true
    },
    handleAvatarSuccess (imgField) {
      return (res, file) => {
        if (res && res.errcode == 0) {
          this.formData[imgField] = res.info
        }
      }
    },
    handleEdit (row) {
      this.isFormDialogShowed = true
      this.isEditing = true
      this.formData = Object.assign({}, row)
    },
    handleCurrentChange (pageNo) {
      this.queryParams.pageNo = pageNo
      this.loadData()
    },
    handleSizeChange (pageSize) {
      this.queryParams.pageSize = pageSize
      this.loadData()
    },
    handleSubmitForm () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.isSubmiting = true
          this.$post(this.isEditing ? '/admin/share_activity_user_log/update' : '/admin/share_activity_user_log/create', this.formData).then(() => {
            this.loadData()
            this.isFormDialogShowed = false
            this.$$notify()
          }).finally(() => {
            this.isSubmiting = false
          })
        }
      })
    },
    loadData () {
      this.listLoading = true
      this.$post('/admin/share_activity_user_log/goods_share_statistics', this.queryParams).then(data => {
        this.dataList = data.rows || []
        this.dataTotal = data.total
      }).finally(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

  <style scoped lang="scss">
    .title {
      text-align: center;
      padding: 0 0 20px 0;
      font-size: 20px;
    }

    .content {
      line-height: 2;
    }
  </style>
